<template>
  <div class="container">
    <el-page-header @back="goBack" content="服务中订单地图"></el-page-header>
    <el-row type="flex" justify="space-between" class="nav-bar e-m-t-60">
      <el-col :span="3">
        <!-- <el-button type="primary" icon="el-icon-plus" plain @click="create">新建账号</el-button> -->
      </el-col>
      <el-col class="text-right">
        <!-- <el-form :inline="true" label-width="auto" class="nav-bar-form">
          <el-form-item>
            <el-button type="primary" @click="getData">刷新</el-button>
          </el-form-item>
        </el-form> -->
      </el-col>
    </el-row>
    <div class="flex">
      <div class="e-w-330 e-font-12 e-m-r-15">
        <el-tabs type="border-card" style="height: 100%">
          <el-tab-pane label="服务的订单">
            <el-scrollbar class="text-item" :wrap-class="'text-item-wrap'" v-if="gpsData.order.length > 0">
              <div class="card-box" v-for="(order,index) in gpsData.order" :key="index" @click="moveTo('order',order.id)">
                <div class="header">
                  <span>{{order.number}}</span>
                  <span class="color-warning">{{order.state}}</span>
                </div>
                <div class="body">
                  <div class="tips"><span class="el-icon-date"></span>{{order.createddatetime}}</div>
                  <div class="tips"><span class="el-icon-location"></span>{{order.address}}</div>
                </div>
              </div>
            </el-scrollbar>
            <div class="tips" v-else>
              <span class="el-icon-warning"></span>
              <span>暂无服务的订单</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="车辆">
            <el-scrollbar class="text-item" :wrap-class="'text-item-wrap'" v-if="gpsData.vehicle.length > 0">
              <div class="card-box" v-for="(vehicle,index) in gpsData.vehicle" :key="index" @click="moveTo('vehicle',vehicle.id)">
                <div class="header">
                  <span>{{vehicle.licenseplate}}</span>
                  <span class="color-success" v-if="vehicle.vehiclestate == '空闲'">{{vehicle.vehiclestate}}</span>
                  <span class="color-warning" v-else>{{vehicle.vehiclestate}}</span>
                </div>
                <div class="body">
                  <div class="tips">{{vehicle.typename}}</div>
                </div>
              </div>
            </el-scrollbar>
            <div class="tips" v-else>
              <span class="el-icon-warning"></span>
              <span>暂无车辆信息</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="小哥">
            <el-scrollbar class="text-item" :wrap-class="'text-item-wrap'" v-if="gpsData.brother.length > 0">
              <div class="card-box" v-for="(brother,index) in gpsData.brother" @click="moveTo('brother',brother.id)">
                <div class="header">
                  <span>{{brother.name}}</span>
                </div>
                <div class="body">
                  <div class="tips">{{brother.mobile}}</div>
                </div>
              </div>
            </el-scrollbar>
            <div class="tips" v-else>
              <span class="el-icon-warning"></span>
              <span>暂无小哥信息</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="站点">
            <el-scrollbar class="text-item" :wrap-class="'text-item-wrap'" v-if="gpsData.staffs.length > 0">
              <div class="card-box" v-for="(staffs,index) in gpsData.staffs" @click="moveTo('staffs',staffs.id)">
                <div class="header">
                  <span>{{staffs.name}}</span>
                </div>
                <div class="body">
                  <div class="tips">{{staffs.mobile}}</div>
                </div>
              </div>
            </el-scrollbar>
            <div class="tips" v-else>
              <span class="el-icon-warning"></span>
              <span>暂无站点信息</span>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="e-flex-1" v-loading="loading" style="background: #FFFFFF;border: 1px solid #DCDFE6;box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);">
        <div class="map-center" id="container">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    layout: 'admin',
    head() {
      return {
        title: '服务中订单地图' 
      }
    },
    data() {
      return {
        loading: true,
        gpsData: {
          order: [],
          brother: [],
          vehicle: [],
          staffs: []
        },
        map: null,
        AMap: null,
        mapInit: false,
        infoWindow: null,
        marker: null,
        markerArr: []
      }
    },
    watch: {
      'gpsData'() {
        this.gpsToWGS84();
      }
    },
    mounted() {
      this.loading = true
      this.$AMapLoader.load({
        key: this.AMapSetting.key, // 申请好的Web端开发者Key，首次调用 load 时必填
        version: this.AMapSetting.version, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Geocoder'],
      }).then((AMap) => {
        this.loading = false
        this.AMap = AMap;
        this.map = new this.AMap.Map("container", { //设置地图容器id
          zoom: 12, //设置地图的缩放级别
          zooms: [3, 20],
          resizeEnable: true,
          expandZoomRange: true,
          center: [113.042648, 23.625349], //初始化地图中心点位置
        });
        this.mapInit = true;

        this.getData();
      }).catch(e => {
        this.loading = false
        this.$message.error(e);
        console.log(e);
      })
    },
    methods: {
      moveTo(type,id) {
        var marker=this.markerArr.find(c=>c.De.extData.type==type && c.De.extData.data.id==id);

        this.map.setCenter(marker.getPosition());
        this.showInfo(marker);
      },
      gpsToWGS84() {
        if (this.map == null) {
          if (!this.mapInit) {
            this.gpsToWGS84();
          }
          return;
        }
        
        for(var k in this.gpsData){
          if(k != 'msg') {
            if(this.gpsData[k].length > 0){
              this.gpsData[k].forEach((e)=> {
                e.position = new this.AMap.LngLat(e.lng, e.lat)
              });
            }
          }
        }
        this.draw();
      },
      draw() {
        if (this.map) {
          this.map.clearMap();
          this.markerArr = [];
        }
        var center = null;
        if (this.gpsData.vehicle.length > 0) {
          center = this.gpsData.vehicle[0].position;
        } else if (this.gpsData.order.length > 0) {
          center = this.gpsData.order[0].position;
        } else if (this.gpsData.brother.length > 0) {
          center = this.gpsData.brother[0].position;
        }
        if (center == null) {
          alert("没有找到数据");
          return;
        }

        var i = 0;
          for (i = 0; i < this.gpsData.vehicle.length; i++) {
            var marker = new AMap.Marker({
              map:this.map,
              position: this.gpsData.vehicle[i].position,
              // icon: 'https://webapi.amap.com/images/car.png',
              content: `
                <div style="display: flex;flex-direction: column;align-items: center;">
                  <img src="https://webapi.amap.com/images/car.png" style="width:50px;"/>
                </div>
              `,
              offset: new this.AMap.Pixel(-30, -60),
              extData: {
                type: 'vehicle',
                data: this.gpsData.vehicle[i]
              }
            });
            marker.on('click', (e) => {
              this.showInfo(e.target);
            })
            this.markerArr.push(marker);
          }
          for (i = 0; i < this.gpsData.order.length; i++) {
            var marker = new AMap.Marker({
              map:this.map,
              position: this.gpsData.order[i].position,
              // icon: 'https://webapi.amap.com/theme/v1.3/markers/b/mark_r.png',
              content: `
                <div style="display: flex;flex-direction: column;align-items: center;">
                  <img src="/images/amap/mark_r.png" style="position: absolute;z-index: -1;"/>
                  <img 
                    src="${this.gpsData.order[i].photo?this.fileURL+this.gpsData.order[i].photo:''}" 
                    style="width:30px;height:30px;border-radius: 50%;box-shadow: 0 0 5px #999;margin-top: 4px;"
                  />
                  <!--div style="background: #02d5d6;font-size: 12px;color: #fff;padding: 2px 6px;border-radius: 4px;margin-top: 4px;">${this.gpsData.order[i].name}</div-->
                </div>
              `,
              offset: new this.AMap.Pixel(0, -80),
              extData: {
                type: 'order',
                data: this.gpsData.order[i]
              }
            });
            marker.on('click', (e) => {
              this.showInfo(e.target);
            })
            this.markerArr.push(marker);
          }

          // 只显示已上线的小哥
          this.gpsData.brother = this.gpsData.brother.filter((item)=>item.online == true)

          for (i = 0; i < this.gpsData.brother.length; i++) {
              var marker = new AMap.Marker({
                map:this.map,
                position: this.gpsData.brother[i].position,
                // icon: '/images/amap/lajiche.png',
                content: `
                  <div style="display: flex;flex-direction: column;align-items: center;">
                    <img src="/images/logo-ico.png" style="width:60px;"/>
                    <!--div style="background: #02d5d6;font-size: 12px;color: #fff;padding: 2px 6px;border-radius: 4px;margin-top: 4px;">${this.gpsData.brother[i].name}</div-->
                  </div>
                `,
                offset: new this.AMap.Pixel(-30, -60),
                extData: {
                  type: 'brother',
                  data: this.gpsData.brother[i]
                }
              });
              marker.on('click', (e) => {
                this.showInfo(e.target);
              })
              this.markerArr.push(marker);
          }

          // 只显示已上线的站点
          this.gpsData.staffs = this.gpsData.staffs.filter((item)=>item.online == true)

          for (i = 0; i < this.gpsData.staffs.length; i++) {
              var marker = new AMap.Marker({
                map:this.map,
                position: this.gpsData.staffs[i].position,
                // icon: '/images/amap/lajiche.png',
                content: `
                  <div style="display: flex;flex-direction: column;align-items: center;">
                    <img src="/images/amap/cangku.png" style="width:60px;"/>
                    <!--div style="background: #02d5d6;font-size: 12px;color: #fff;padding: 2px 6px;border-radius: 4px;margin-top: 4px;">${this.gpsData.staffs[i].name}</div-->
                  </div>
                `,
                offset: new this.AMap.Pixel(-30, -60),
                extData: {
                  type: 'staffs',
                  data: this.gpsData.staffs[i]
                }
              });
              marker.on('click', (e) => {
                this.showInfo(e.target);
              })
              this.markerArr.push(marker);
          }
        if (this.markerArr.length == 0) return;

        if (this.infoWindow == null) {
          this.infoWindow = new AMap.InfoWindow({
            content: ''
          });
        }
        this.map.setFitView();
        this.map.setCenter(center);
        this.map.setZoom(12);
      },
      showInfo(marker){
          //marker.setzIndex(200);
          //marker.setLabel({content: e.data.name})
          this.infoWindow.setOffset(new this.AMap.Pixel(0, 0));
          var data=marker.getExtData().data;
          switch (marker.getExtData().type) {
            case 'vehicle':
              this.infoWindow.setContent(
                `
                  <div class="content-window-card">
                    <div class="content-window-head">
                      <span class="e-p-r-30">${data.licenseplate}</span>
                    </div>
                    <div class="body e-font-12">
                      <div><span class="tips">车辆类型：${data.typename}</span></div>
                      <div><span class="tips">车辆状态：${data.vehiclestate}</span></div>
                    </div>
                  </div>
                `
              );
              this.infoWindow.setOffset(new this.AMap.Pixel(0, -20));
              break;
            case 'order':
              // this.infoWindow.setContent(data.number + '<br>' + data.name + '<br>' + data.mobile +'<br>' + data.state);
              this.infoWindow.setContent(
                `
                  <div class="content-window-card">
                    <div class="content-window-head">
                      <span class="e-p-r-30"><a href="/order/user/Views?id=${data.id}" target="_blank">${data.number}</a></span>
                    </div>
                    <div class="body e-font-12">
                      <div><span class="tips">用户名称：${data.name}</span></div>
                      <div><span class="tips">联系电话：${data.mobile}</span></div>
                      <div><span class="tips">地址：${data.address}</span></div>
                    </div>
                  </div>
                `
              )
              this.infoWindow.setOffset(new this.AMap.Pixel(30, -50));
              break;
            case 'brother':
              this.infoWindow.setContent(
                `
                  <div class="content-window-card">
                    <div class="content-window-head">
                      <span class="e-p-r-30"><a href="/distribution/views?id=${data.id}" target="_blank">${data.name}</a></span>
                    </div>
                    <div class="body e-font-12">
                      <div><span class="tips">联系电话：${data.mobile}</span></div>
                    </div>
                  </div>
                `
              );
              this.infoWindow.setOffset(new this.AMap.Pixel(3, -20));
              break;
            case 'staffs':
              this.infoWindow.setContent(
                `
                  <div class="content-window-card">
                    <div class="content-window-head">
                      <span class="e-p-r-30"><a href="/clerk/views?id=${data.id}" target="_blank">${data.name}</a></span>
                    </div>
                    <div class="body e-font-12">
                      <div><span class="tips">站点电话：${data.mobile}</span></div>
                    </div>
                  </div>
                `
              );
              this.infoWindow.setOffset(new this.AMap.Pixel(3, -20));
              break;
          }
          this.infoWindow.open(this.map, marker.getPosition());
      },
      goBack() {
        this.$router.go(-1)
      },
      getData() {
        return this.$axios.get('/User/Order/Map').then((res) => {
          this.gpsData = res
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  
  .map-center {
    width: 100%;
    height: calc(100vh - 240px);
    // background-image: url("@/static/images/map.png");
    background-position: center;
    background-size: cover;
  }

  .card-box{
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f1f1;
    cursor: pointer;
    &:hover{
      color: var(--main);
    }
    .header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 5px;
    }
    .body{

    }
  }

  .text-item {
    height: calc(100vh - 310px);

    ::v-deep{
      .text-item-wrap {
        overflow-x: hidden;
      }
    }
  }
</style>
